/**
 * @Author: zkz
 * @Date: 2025/09/17 16:04
 * @Description: 文章详情页
 */
import { Link, useNavigate } from 'react-router-dom';
import { Card, Breadcrumb, Form, Button, Radio, DatePicker, Select, Popconfirm, message } from 'antd';
import locale from 'antd/es/date-picker/locale/zh_CN';
// 导入资源
import { Table, Tag, Space } from 'antd';
import { EditOutlined, DeleteOutlined } from '@ant-design/icons';
import img404 from '@/assets/img/error.png';
import useChannel from '@/hooks/useChannel';
import { useState, useEffect } from 'react';
import { getArticleListAPI, deleteArticleAPI } from '@/api/article';

const { Option } = Select;
const { RangePicker } = DatePicker;
const Article = () => {
	const navigate = useNavigate()
	// 频道列表数组数据处理
	const { channelList } = useChannel();
	const status = {
		1: <Tag color="warning">待审核</Tag>,
		2: <Tag color="success">审核通过</Tag>
	};
	// 准备列数据
	const columns = [
		{
			title: '封面',
			dataIndex: 'cover',
			width: 120,
			render: (cover) => {
				return <img src={cover.images[0] || img404} width={80} height={60} alt="" />;
			}
		},
		{
			title: '标题',
			dataIndex: 'title',
			width: 220
		},
		{
			title: '状态',
			dataIndex: 'status',
			// 自定义状态列渲染
			// data ==1 待审核
			// data ==2 审核通过
			render: (data) => status[data]
		},
		{
			title: '发布时间',
			dataIndex: 'pubdate'
		},
		{
			title: '阅读数',
			dataIndex: 'read_count'
		},
		{
			title: '评论数',
			dataIndex: 'comment_count'
		},
		{
			title: '点赞数',
			dataIndex: 'like_count'
		},
		{
			title: '操作',
			render: (data) => {
				return (
					<Space size="middle">
						<Button type="primary" shape="circle" icon={<EditOutlined />} onClick={() => navigate(`/publish?id=${data.id}`)} />
						<Popconfirm
							title="删除文章"
							description="确认删除该文章吗?"
							onConfirm={() => confirm(data.id)}
							okText="确认"
							cancelText="取消"
						>
							<Button type="primary" danger shape="circle" icon={<DeleteOutlined />} />
						</Popconfirm>
					</Space>
				);
			}
		}
	];

	//  筛选数据处理 准备参数
	const [ reqData, setReqData ] = useState({
		status: '',
		channel_id: '',
		begin_pubdate: '',
		end_pubdate: '',
		page: 1,
		per_page: 5
	});

	// 文章列表数据处理
	const [ list, setList ] = useState([]);
	const [ count, setCount ] = useState(0);
	useEffect(
		() => {
			async function getArticleList() {
				const res = await getArticleListAPI(reqData);
				setList(res.data.results);
				setCount(res.data.total_count);
			}
			getArticleList();
		},
		[ reqData ]
	);
	// 删除文章
	const confirm = async (id) => {
		// 调用接口删除文章
		const res = await deleteArticleAPI(id);
		if (res.message === 'OK') {
			message.success('删除成功');
			// 刷新文章列表
			setReqData({ ...reqData, page: 1 });
		} else {
			message.error('删除失败');
		}
	};
	const onFinish = (values) => {
		setReqData({
			...reqData,
			status: values.status,
			channel_id: values.channel_id,
			begin_pubdate: values.date ? values.date[0].format('YYYY-MM-DD') : '',
			end_pubdate: values.date ? values.date[1].format('YYYY-MM-DD') : ''
		});
	};
	const handleTableChange = (page) => {
		setReqData({
			...reqData,
			page
		});
	};

	return (
		<div>
			<Card
				title={<Breadcrumb items={[ { title: <Link to={'/'}>首页</Link> }, { title: '文章列表' } ]} />}
				style={{ marginBottom: 20 }}
			>
				<Form initialValues={{ status: '' }} onFinish={onFinish}>
					<Form.Item label="状态" name="status">
						<Radio.Group>
							<Radio value={''}>全部</Radio>
							<Radio value={1}>待审核</Radio>
							<Radio value={2}>审核通过</Radio>
						</Radio.Group>
					</Form.Item>

					<Form.Item label="频道" name="channel_id">
						<Select placeholder="请选择文章频道" style={{ width: 150 }}>
							{channelList &&
								channelList.map((item) => (
									<Option key={item.id} value={item.id}>
										{item.name}
									</Option>
								))}
						</Select>
					</Form.Item>

					<Form.Item label="日期" name="date">
						{/* 传入locale属性 控制中文显示*/}
						<RangePicker locale={locale} />
					</Form.Item>

					<Form.Item>
						<Button type="primary" htmlType="submit" style={{ marginLeft: 40 }}>
							筛选
						</Button>
					</Form.Item>
				</Form>
			</Card>
			{/*    表格数据    */}
			<Card title={`根据筛选条件共查询到 ${count} 条结果：`}>
				<Table
					rowKey="id"
					columns={columns}
					dataSource={list}
					pagination={{
						total: count,
						pageSize: reqData.per_page,
						current: reqData.page,
						onChange: handleTableChange
					}}
				/>
			</Card>
		</div>
	);
};
export default Article;
